<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title>商品列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" th:href="@{/css/font.css}">
        <link rel="stylesheet" th:href="@{/css/xadmin.css}">
        <link rel="stylesheet" th:href="@{/lib/rep/bootstrap-3.3.7-dist/css/bootstrap.css}">
        <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="table.reload('listTest')" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" style="text-align: right">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="search" id="search" placeholder="请输入商品关键字" autocomplete="off" class="layui-input"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <a class="layui-btn" id="search-btn">
                                        <i class="layui-icon">&#xe615;</i>
                                    </a>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-table" id="list" lay-filter="test"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!--业务相关js-->
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script>
        let table;
        let current;
        let limit;
        //页面加载时完成则请求接口获取数据
        layui.use('table',function () {
            table = layui.table;
            let page = {prev:'上一页',next:'下一页',first:'首页',last:'尾页',layout: ['prev','page','next','limit','refresh','skip','count']};
            table.render({
                elem: '#list',
                url: '/goods/lists',
                page: page,             //分页对象
                loading: true,
                limit: 10,
                limits: [10,20,50,100],
                id: 'listTest',
                parseData: function (res) {//接口数据格式化
                    return{
                        "code": res.code,
                        "msg": res.content,
                        "count": res.count,
                        "data": res.data
                    }
                },
                toolbar:'#toolbarDemo',
                defaultToolbar: ['filter','exports','print'],
                response:{
                    statusName:'code', //规定返回的状态码字段为code
                    statusCode:200 //规定成功的状态码为200，官方默认为0，为0会不渲染数据，后台数据必须设置
                },
                done: function (res,curr,count) {
                    current = curr;
                    limit = this.limit;
                    setTbStyle();
                },
                method: 'post',
                cols:
                [
                    [
                        {field:'checkbox',type:'checkbox'},
                        {field: 'goods-id',title: '商品ID',sort: true,
                            templet: function (d) {
                                return '<span>'+ d.id +'</span>'
                            }},
                        {field: 'goods-name',title: '商品名称',
                            templet: function (d) {
                                return '<span>'+ d.name +'</span>'
                            }},
                        {field: 'brief-info',title: '商品简介',breakword:true,
                            templet: function (d) {
                                return '<span>'+ d.brief +'</span>'
                            }},
                        {field: 'price',title: '单价', sort: true ,
                            templet: function (d) {
                                return '<span>￥'+ d.price +'</span>'
                            }},
                        {field: 'stock',title: '库存', sort: true ,
                            templet: function (d) {
                                return '<span>'+ d.stock +'</span>'
                            }},
                        {field: 'limit',title: '限购', sort: true ,
                            templet: function (d) {
                                return '<span>'+ d.limit +'</span>'
                            }},
                        {field: 'category',title: '分类',
                            templet: function (d) {
                                return '<span>'+ d.category +'</span>'
                            }},
                        {field: 'image',title: '缩略图',
                            templet: function (d) {
                                return '<span><img src="' + d.image +  '" alt="商品图片缩略图"/></span>'
                            }},
                        {field: 'state',title: '发布状态',
                            templet: function (d) {
                                if (d.state === '已发布'){
                                    return '<span style="text-align:center;display:inline-block;padding:0 10px;' +
                                        'background-color:darkseagreen;color:white;font-weight:bold;border-radius:8px">'
                                        + d.state +'</span>'
                                }
                                if (d.state === '已下架'){
                                    return '<span style="text-align:center;display:inline-block;padding:0 10px;' +
                                        'background-color:darkgrey;color:white;font-weight:bold;border-radius:8px">'
                                        + d.state +'</span>'
                                }
                                return '<span style="text-align:center;display:inline-block;padding:0 10px;' +
                                    'background-color:#e6a600;color:white;font-weight:bold;border-radius:8px">'
                                    + d.state +'</span>'
                            }},
                        {field: 'operation',title: '操作',
                            templet: function (d) {
                                let html1 = '';
                                let html2 = '';
                                html1 = '<div><a href="javascript:;" title="发布商品" id="' + d.id + '" onclick="whats_to_do(this)"><i class="layui-icon layui-icon-release" style="font-weight: bold;color: blueviolet"></i></a>&nbsp;|&nbsp;';
                                if (d.state === '已发布'){
                                    html1 = '<div><a href="javascript:;" title="下架商品" id="' + d.id + '" onclick="whats_to_do(this)"><i class="layui-icon layui-icon-close-fill"></i></a>&nbsp;|&nbsp;'
                                }
                                if (d.state === '已下架'){
                                    html1 = '<div><a href="javascript:;" title="审核商品" id="' + d.id + '" onclick="whats_to_do(this)"><i class="layui-icon layui-icon-ok" style="font-weight: bold"></i></a>&nbsp;|&nbsp;'
                                }
                                html2 = '<a href="javascript:;" title="编辑商品" id="' + d.id + '" onclick="whats_to_do(this)"><i class="glyphicon glyphicon-edit" style="color: #45a428"></i></a>&nbsp;|&nbsp;<a href="javascript:;" title="删除商品" id="' + d.id + '" onclick="whats_to_do(this)"><i class="layui-icon layui-icon-delete" style="color: red;font-weight: bold"></i></a></div>';
                                return html1 + html2;
                            }}
                    ]
                ]
            });

            //数据搜索
            $('#search-btn').on('click',function () {
                let ket = $('#search').val();
                if (ket.length <= 0) ket = null;
                //重载reload，用于数据搜索
                table.reload('listTest',{
                    where:{
                        search: ket
                    },
                    page:{
                        curr: 1
                    }
                });
            });
        });
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" >
            <button class = "layui-btn layui-btn-sm layui-link layui-btn-normal" lay-event="add-someone"><i class="layui-icon layui-icon-add-1"></i> 添加商品 </button>
            <button class = "layui-btn layui-btn-sm layui-btn-danger" lay-event = "batch" id="delete"><i class="layui-icon layui-icon-delete"></i> 批量删除 </button>
            <button class = "layui-btn layui-btn-sm layui-btn-normal" lay-event = "batch" id="release" style="background-color: darkseagreen"><i class="layui-icon layui-icon-release"></i> 批量发布 </button>
            <button class = "layui-btn layui-btn-sm layui-btn-normal" lay-event = "batch" id="examine"><i class="layui-icon layui-icon-ok-circle"></i> 批量审核 </button>
            <button class = "layui-btn layui-btn-sm layui-btn-normal" lay-event = "batch" id="off-shelf" style="background-color: darkgrey"><i class="layui-icon layui-icon-close-fill"></i> 批量下架 </button>
        </div >
    </script>
    <script>
        layui.use('table',
        function() {
            table = layui.table;

            //监听单元格编辑
            table.on('edit(test)',
            function(obj) {
                var value = obj.value //得到修改后的值
                ,
                data = obj.data //得到所在行所有键值
                ,
                field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });

            //头工具栏事件
            table.on('toolbar(test)',
            function(obj) {
                let checkStatus = table.checkStatus(obj.config.id);
                let data = checkStatus.data;
                let ids = [];
                for(let i=0; i < data.length;i++){
                    ids[i] = data[i].id;
                }
                switch (obj.event) {
                case 'add-someone':
                    xadmin.open('商品添加','/goods/add/page' ,'','',true);
                    break;
                case 'batch':
                    let msg = '';
                    let url = '';
                    let datas = JSON.stringify(ids);
                    let bid = this.id;
                    //批量删除
                    if (bid === 'delete') {
                        msg = '删除';
                        url = '/goods/dels';
                    }
                    //批量发布
                    if (bid === 'release') {
                        msg = '发布';
                        url = '/goods/rels';
                    }
                    //批量上架
                    if (bid === 'examine') {
                        msg = '审核上架';
                        url = '/goods/exams';
                    }
                    //批量下架
                    if (bid === 'off-shelf') {
                        msg = '下架';
                        url = '/goods/offs';
                    }
                    let batchMsg = '您共选择了' + data.length +'个商品，确定要批量' + msg + '这些商品吗？';
                    if (data.length > 0){
                        layer.confirm(batchMsg
                            ,{btn: ['确认','取消'],icon: 3}
                            ,function () {
                                layer.close(layer.index);
                                $.ajax({
                                    contentType: 'application/json;charset=UTF-8',
                                    type: 'post',
                                    url: url,
                                    data: datas,
                                    traditional: true,
                                    success: function (result) {
                                        let r_icon = icon(result);
                                        if (result.type === 'success'){
                                            layer.confirm(result.content
                                                ,{btn:['确定'],icon:r_icon}
                                                ,function () {
                                                    refresh_curr('/goods/lists',null);
                                                    layer.close(layer.index);
                                                });
                                        }else layer.alert(result.content,{icon:r_icon});
                                    },
                                    error:function(XMLHttpRequest) {
                                        layer.close(index);
                                        layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
                                    }
                                });
                            });
                    }else {
                        layer.msg("未勾选任何数据",{icon:5});
                    }
                    break;
                }
            });
        });

        //弹出层
        function whats_to_do(obj) {
            let title = obj.title;
            let url = '';
            let id = obj.id;
            let msg = '确定要'+ title + id + '吗?';
            if (title === '编辑商品'){
                xadmin.open('商品编辑','/goods/edit/page?gid=' + id ,'','',true);
            }else {
                if (title === '发布商品') url = '/goods/release';
                if (title === '下架商品') url = '/goods/off';
                if (title === '审核商品') url = '/goods/examine';
                if (title === '删除商品') url = '/goods/del';
                layer.confirm(msg
                    ,{btn: ['确定','取消'],icon: 3}
                    ,function () {
                        layer.close(layer.index);
                        $.ajax({
                            type: 'post',
                            url: url,
                            data: {id:id},
                            success: function (result) {
                                let r_icon = icon(result);//获取icon
                                if (result.type === 'success'){
                                    layer.confirm(result.content
                                        ,{btn: ['确定'],icon: r_icon}
                                        ,function () {
                                            refresh_curr('/goods/lists',null);
                                            layer.close(layer.index);
                                        });
                                }else layer.msg(result.content,{icon:r_icon});
                            },
                            error: function (XMLHttpRequest) {
                                layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
                            }
                        });
                    });
            }
        }

        //格式控制
        function setTbStyle() {
            let $data = $("[data-field='brief-info']").children('div').css("overflow","hidden")
                .css("white-space","nowrap");
        }
    </script>
    <style>
        /*解决滚动条的问题*/
        table thead tr th div span{
            font-weight: bold;
        }
        /*商品简介数据折叠*/
        .layui-table-cell {
            text-align: center;
            padding:0 5px;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
            word-break: break-all;
            color: black;
        }
        .layui-table-cell div a{
            text-decoration: none;
        }
    </style>
</html>